<template>
  <view :class="$style.collapse" class="flex justify-between">
    <view :class="$style.title">{{titleName}}</view>
    <view class="operation">
      <image :src="dropDownImg" mode="widthFix" style="width: 28rpx;" v-show="showPage"  />
      <image :src="foldUpImg" mode="widthFix" style="width: 28rpx;" v-show="!showPage" />
    </view>
  </view>
</template>

<script setup lang='ts'>
import dropDownImg from "@/static/images/common/drop_down.png";
import foldUpImg from "@/static/images/common/fold_up.png";
import { ref } from "vue";

interface Props {
  titleName: string;
  operation?: string;
  showPage?:boolean
}
const props = withDefaults(defineProps<Props>(), {
  operation: "small",
  showPage:false,
});

const collapseState = ref<boolean>(false);
const emit = defineEmits(["changeCollapseState"]);

function changeCollapseState() {
  collapseState.value = !collapseState.value;
  if (collapseState.value) {
    emit("changeCollapseState", "dropDown");
  } else {
    emit("changeCollapseState", "foldUp");
  }
}
</script>

<style lang='less' module>
.collapse {
  width: 100%;

  .title {
    font-size: 30rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }
}
</style>
